<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        input {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 
      3种方式
      1 使用jquery内置
      2 使用第三方js库  form-serialize 
      3 formdata
     -->
    <form>
        <input type="text" value="111" name="username1" />
        <input type="text" value="222" name="username2" />
        <input type="text" value="333" name="username3" />
        <input type="text" value="444" name="username4" />
        <input type="text" value="555" name="username5" />
        <input type="text" value="666" name="username6" />
        <input type="text" value="777" name="username7" />
        <input type="text" value="888" name="username8" />
        <input type="text" value="999" name="username9" />
        <input type="text" value="000" name="username10" />
        <button>提交</button>
    </form>
    <!-- <script src="../assets/lib/jquery-3.6.0.min.js"></script> -->
    <script src="./form-serialize.js"></script>
    <script>
        const form = document.querySelector("form");
        form.addEventListener("submit", function (e) {
            e.preventDefault();
            // 1 使用jq的方式来获取
            // const jqForm = $(form).serialize(); // a=1&b=2
            // console.log(jqForm);

            // 2 form-serialize
            // const str = serialize(form); // 返回字符串
            // const obj = serialize(form, { hash: true }); // 加hash返回对象
            // console.log(obj);

            // 3 formdata  特殊构造函数 对应 实例 特殊，无法直接 .语法来访问里面的数据 form.get()
            // const formData = new FormData(form); //前提是input设置name属性。
            // console.log(formData.get(username1))
            // // 格式处理！！
            // // 自己遍历
            // let list = [];
            // const obj = {};
            // formData.forEach((val, key) => {
            //   list.push(`${key}=${val}`);//字符串拼接
            //   obj[key] = val; //对象格式。
            // });
            // console.log(list.join("&"));
            // console.log(obj);

            // 4 演示快速给form表单赋值
            const obj = {
                username1: "username1username1",
                username2: "username2username2",
                username3: "username3username3",
                username4: "username4username4",
                username5: "username5username5",
                username6: "username6username6",
                username7: "username7username7",
                username8: "username8username8",
                username9: "username9username9",
                username10: "username10username10",
            };
            // key 对应obj 中所有的属性名，obj[key]表示所有属性值
            for (const key in obj) {
                document.querySelector(`input[name=${key}]`).value = obj[key];
            }
        });
    </script>
</body>

</html>